<template>
  <div id="wave" ref="wave" :style="{ '--color': color, '--bottom': bottom }">
    <div id="txt" ref="txt">{{ percent }}%</div>
  </div>
</template>

<script>
/**
 *水波纹效果
 *波纹高度即服务器占用百分比
 */

// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》'

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: {
    percent: { required: true, default: 15, type: Number },
  },
  data() {
    // 这里存放数据
    return {};
  },
  // 监听属性 类似于data概念
  computed: {
    bottom: function () {
      return this.percent + "%";
    },
    color: function () {
      let val = this.percent;
      if (val >= 100) {
        return "#FF0000";
      } else if (val >= 80 && val < 100) {
        return "#FFA500";
      } else if (val >= 60 && val < 80) {
        return "#00BFFF";
      } else {
        return "#00FF00";
      }
    },
  },
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeDestroy() {}, // 生命周期 - 销毁之前
  // 方法集合
  methods: {},
};
</script>

<style lang='scss' scoped>
//@import url(); 引入公共css类
#wave {
  padding: 0;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border: 2px solid #2c83d1;
  border-radius: 50%;
  position: relative;
  background-color: var(--color);
  overflow: hidden;
  color: #ffffff;
}
#wave::before,
#wave::after {
  content: "";
  position: absolute;
  bottom: var(--bottom);
  width: 108px;
  height: 108px;
  background-color: #123781;
  animation: rote 8s linear infinite;
  z-index: 1;
}
#wave::before {
  left: -95%;
  border-radius: 45%;
  opacity: 0.5;
}
#wave::after {
  left: -95%;
  border-radius: 46%;
}
@keyframes rote {
  from {
    transform: rotateZ(0);
  }
  to {
    transform: rotateZ(360deg);
  }
}
#txt {
  font-size: 12px;
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  top: 0;
  left: 0;
  margin: 0;
  z-index: 2;
}
</style>
